<template>
	<view>
		<view class="address-edit">
			<view class="p-l-30 p-r-30 bg-white">
				此投诉为小程序自有投诉渠道，非微信官方投诉渠道	
				<!-- 联系方式 -->
				<view class="form-item bb flex" style="flex-wrap: wrap;height: auto;">
					<view  @click="form.tag = i" :class="{activi:form.tag == i}" class="type_tag " v-for="i in tagList" :key="i">{{i}}</view>
				</view>


				<!-- 详细地址填写 -->
				<view class="form-item flex col-top bb m-t-10" style="height: 300rpx;">
					<textarea name="address" class="nr flex-1 m-l-10 p-t-25" style="height: 300rpx;"
					    v-model="form.feedback" placeholder="请详细输入您所遇到的问题或者服务,便于我们为您服务。" auto-blur />
				</view>


				<view class="form-item flex col-top  m-t-10" style="height: 300rpx;">
					<upload-image v-model="form.photo"  mutiple :maxUpload="9" showProgress></upload-image>
				</view>

			</view>

			<button class="my-btn white flex br60 row-center" @click="onSubmit">投诉反馈</button>



		</view>
	</view>
</template>

<script>
	//  hasRegionCode,
	import {
		submitFeedback,
	} from '@/api/user.ts';
	export default {
		data() {
			return {
				tagList: ['投诉用户', '功能异常', '体验问题', '新功能建议', '其他原因'],
				form: {
					tag: '',
					feedback: '',
					photo: [],
				},
			};
		},

		onLoad: function(options) {

		},
		onUnload: function() {
			uni.removeStorageSync('wxAddress');
		},
		methods: {
			

			// 提交地址信息
			onSubmit() {
				
				
				if (!this.form.tag) return this.$toast({
					title: '请选择要投诉的类型'
				});
				if (!this.form.feedback) return this.$toast({
					title: '请输入您遇到的问题，以便我们问您服务'
				})
				
				submitFeedback({
					...this.form
				}).then(res => {
					this.$toast({
						title: '提交成功'
					}, {
						tab: 3,
						url: 1
					});
					setTimeout(() => {
					  uni.reLaunch({
						  url:'/pages/index/index'
					  })	
					},500)
				}).catch(err => {
					return this.$toast({
						title: err
					});
				});	

			},

		

			$toast(msg) {
				uni.showToast({
					title: msg.title,
					icon: 'none'
				})
				return false;
			},

		}
	};
</script>
<style lang="scss">
	@import '@/styles/common.scss';

	.type_tag {
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 20rpx;
		color: #333;
		border-radius: 10rpx;
		border: 1px solid #EEEEE0;
		margin: 10rpx;
		font-size: 26rpx;
	}
	.activi{
		border: 1px solid #F7DA1C;
		color:#F7DA1C
	}

	.address-edit {
		padding-top: 10rpx;

		.bb {
			border-bottom: 1px solid #e5e5e5;
		}

		.form-item {
			height: 110rpx;

			.label {
				width: 150rpx;
				font-weight: 500;
				font-size: 30rpx;
			}

			input {
				height: 100%;
				flex: 1;
			}
		}

		.my-btn {
			// @include background_color();
			height: 80rpx;
			margin: 30rpx 26rpx;
			margin-top: 80rpx;
			text-align: center;
			 background: linear-gradient(180deg, #F7DA1C 0%, #ffc200 100%);
			box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(41, 255, 154, 0.5);
			color: #fff;
		}
	}
</style>